/**
 * 手势引导组件
 * Story 5: Task 10 - 用户引导
 */

import React, { useState, useEffect } from 'react'
import { BottomSheet } from '../BottomSheet'
import './style.css'

interface GestureTip {
  id: string
  icon: string
  title: string
  description: string
}

const GESTURE_TIPS: GestureTip[] = [
  {
    id: 'pull-refresh',
    icon: '🔄',
    title: '下拉刷新',
    description: '在列表顶部向下拉动即可刷新内容',
  },
  {
    id: 'long-press',
    icon: '👆',
    title: '长按菜单',
    description: '长按消息或内容可打开快捷菜单',
  },
  {
    id: 'double-tap',
    icon: '🔍',
    title: '双击缩放',
    description: '双击图片可放大查看，再次双击恢复',
  },
  {
    id: 'drag-reorder',
    icon: '📋',
    title: '拖拽排序',
    description: '长按并拖动可重新排列列表项',
  },
]

const STORAGE_KEY = 'gesture_onboarding_shown'

/**
 * 手势引导组件
 * 首次使用时显示手势提示
 */
export const GestureOnboarding: React.FC = () => {
  const [showOnboarding, setShowOnboarding] = useState(false)
  const [currentTipIndex, setCurrentTipIndex] = useState(0)

  useEffect(() => {
    // 检查是否已显示过引导
    const hasShown = localStorage.getItem(STORAGE_KEY)
    if (!hasShown) {
      setShowOnboarding(true)
    }
  }, [])

  const handleNext = () => {
    if (currentTipIndex < GESTURE_TIPS.length - 1) {
      setCurrentTipIndex(currentTipIndex + 1)
    } else {
      handleClose()
    }
  }

  const handleSkip = () => {
    handleClose()
  }

  const handleClose = () => {
    setShowOnboarding(false)
    localStorage.setItem(STORAGE_KEY, 'true')
  }

  const currentTip = GESTURE_TIPS[currentTipIndex]

  return (
    <BottomSheet
      open={showOnboarding}
      onClose={handleClose}
      title="手势操作指南"
      showHandle={false}
      snapPoints={[0.5]}
    >
      <div className="gesture-onboarding">
        <div className="gesture-tip">
          <div className="gesture-icon">{currentTip.icon}</div>
          <h3 className="gesture-title">{currentTip.title}</h3>
          <p className="gesture-description">{currentTip.description}</p>
        </div>

        <div className="gesture-progress">
          {GESTURE_TIPS.map((tip, index) => (
            <div
              key={tip.id}
              className={`progress-dot ${index === currentTipIndex ? 'active' : ''} ${
                index < currentTipIndex ? 'completed' : ''
              }`}
            />
          ))}
        </div>

        <div className="gesture-actions">
          <button className="btn-skip" onClick={handleSkip}>
            跳过
          </button>
          <button className="btn-next" onClick={handleNext}>
            {currentTipIndex === GESTURE_TIPS.length - 1 ? '开始使用' : '下一个'}
          </button>
        </div>
      </div>
    </BottomSheet>
  )
}

/**
 * 重置引导状态（用于测试）
 */
export const resetGestureOnboarding = () => {
  localStorage.removeItem(STORAGE_KEY)
}
